<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-table"></i>垂直位移分析 (<font color="yellow">沉降状态：正数表示上升、负数表示下降</font>)
		</h5>
		<div class="widget-toolbar no-border">
			<button id="export" onclick="exportExcel('/export/level_ana');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-download-alt"> 导出Excel</i>
			</button>
			<button id="read" onclick="readData('level', '/analysis/level');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-book"> 读取水准仪最新数据</i>
			</button>
			<button id="refresh" onclick="trans2('/analysis/level');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-refresh"> 刷新</i>
			</button>
		</div>
	</div>
	<div class="widget-body">
		<div class="widget-main no-padding">
			<table class="table table-striped table-bordered table-hover">
				<thead class="thin-border-bottom">
					<tr>
						<th class='center' style="height: 30px;">测点名称</th>
						<th class='center'>当前液位高度值(mm)</th>
						<th class='center'>相对基准点的沉降变化量</th>
						<th class='center'>当前基准点液位高度值(mm)</th>
						<th class='center'>沉降状态</th>
						<th class='center'>上升报警参数(mm)</th>
						<th class='center'>下降报警参数(mm)</th>
						
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${datas}" var="level" varStatus="pageStatus">
					<tr>
						<td class='center'>${level.name}</td>
						<td class='center'><fmt:formatNumber value="${level.should}" pattern="####"/></td>
						<td class='center'>
							<c:if test="${level.num == 1}"><fmt:formatNumber value="${baseShould1-level.should}" pattern="####"/></c:if>
							<c:if test="${level.num == 2}"><fmt:formatNumber value="${baseShould2-level.should}" pattern="####"/></c:if>
						</td>
						<td class='center'>
							<c:if test="${level.num == 1}"><fmt:formatNumber value="${baseShould1}" pattern="####"/></c:if>
							<c:if test="${level.num == 2}"><fmt:formatNumber value="${baseShould2}" pattern="####"/></c:if>							
						</td>
						<td class='center'>
							<c:if test="${level.num == 1}">
								<%-- ${((baseShould1-level.should) - (baseInit1-level.init))==0?'不变':((baseShould1-level.should) - (baseInit1-level.init))} --%>
								<c:if test="${((baseShould1-level.should) - (baseInit1-level.init))==0}">不变</c:if>
								<c:if test="${((baseShould1-level.should) - (baseInit1-level.init))!=0}"><fmt:formatNumber value="${((baseShould1-level.should) - (baseInit1-level.init))}" pattern="####"/></c:if>
							</c:if>
							<c:if test="${level.num == 2}">
								<%-- ${((baseShould2-level.should) - (baseInit2-level.init))==0?'不变':((baseShould2-level.should) - (baseInit2-level.init))} --%>
								<c:if test="${((baseShould2-level.should) - (baseInit2-level.init))==0}">不变</c:if>
								<c:if test="${((baseShould2-level.should) - (baseInit2-level.init))!=0}"><fmt:formatNumber value="${((baseShould2-level.should) - (baseInit2-level.init))}" pattern="####"/></c:if>
							</c:if>
						</td>
						<td class='center'>${level.alertup}</td>
						<td class='center'>${level.alertdown}</td>
					</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="widget-box">
	<div class="widget-body">
		<div class="widget-toolbox padding-8 clearfix">
			<label for="ymax">图形显示沉降变化   <font color="red">(注：'+' 相对基准点上升  '-' 相对基准点下降)</font></label>
		</div>
		<div id="level_chart" style="margin-left: auto; margin-right: auto;"></div>
	</div>
</div>

<script type="text/javascript">
	var data = ${data};
	var obj = eval(data);
	var showChart = function() {
		var xName = [];
		var yValue = [];
		var yInit = [];
		var baseShould1 = ${baseShould1};
		var baseInit1 = ${baseInit1};
		var baseShould2 = ${baseShould2};
		var baseInit2 = ${baseInit2};
		for (var j = 0; j < obj.length; j++) {
			var surface = obj[j];
			/* if (surface.type == 1) {
				continue;
			} */
			var should, init;
			if (surface.num == 1) {
				should = baseShould1 - surface.should;
				init = baseInit1 - surface.init;
			} else {
				should = baseShould2 - surface.should;
				init = baseInit2 - surface.init;				
			}
			yValue.push(should);
			yInit.push(init);
			xName.push(surface.name);
		}
		$('#level_chart').highcharts({
			chart : {},
			title : {
				text : '各测点相对沉降量(mm)'
			},
			subtitle : {
				text : ''
			},
			credits : {
				enabled : false
			},
			xAxis : {
				categories : xName
			},
			yAxis : {
				max : 210,
				min : -210,
				gridLineWidth : 0,
				title : {
					text : '沉降值(mm)'
				},
				plotLines : [ {
					color : '#C90000',
					value : 200,
					width : 1
				}, {
					color : '#C90000',
					value : -200,
					width : 1
				}, {
					color : '#C90000',
					dashStyle : 'ShortDash',
					value : 0,
					width : 1
				} ]
			},
			tooltip : {
				enabled : true,
				formatter : function() {
					return (Math.abs(this.y)).toFixed(0)+'mm' + ' (' + (this.y == 0 ? '不变' : this.y > 0 ? '上升' : '下沉') + ')';
				}
			},
			plotOptions: {
				column: {
                    	pointWidth: 50,
					
                    dataLabels: {
                    	//rotation: 270,
                        formatter: function() {
                        	/* if (this.series._i == 0) {
                        		return (Math.abs(this.y)).toFixed(2);
                        	} */
                        	return this.y == 0 ? '基准' : this.y > 0 ? '+'+(Math.abs(this.y)).toFixed(0) : '-'+(Math.abs(this.y)).toFixed(0);
                        },
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
			series : [ {
				type : 'column',
				name : '初始值',
				data : yInit,
				marker : {
					radius : 4
				}
			}, {
				type : 'column',
				name : '当前值',
				data : yValue,
				marker : {
					radius : 4
				}
			}]
		});
	};
	 showChart();
	 
	 function exportExcel(urlStr){
			var url = "/tail/" + urlStr;
			window.open(url);
		}
</script>
